<template>
    <rx-dialog @handOk="okFun" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form :form="form">
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.calcMethod','计算方式')">
                                <a-radio-group v-model="computeWay" @change="onChangeComputeWay">
                                    <a-radio value="time">{{i18n('duration','时长')}}</a-radio>
                                    <a-radio value="date">{{i18n('timePoint','时间点')}}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.startDate','选择开始日期')">
                                <a-date-picker show-time placeholder="Select Time" @change="onBeginDataChange"
                                               @ok="onBeginDataOk"/>
                            </a-form-item>
                        </a-col>

                        <a-col :span="12" v-show="showTime">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.endDate','选择结束日期')">
                                <a-date-picker show-time placeholder="Select Time" @change="onEndDataChange"
                                               @ok="onEndDataOk"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12" v-show="!showTime">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.duration','选择时长(分钟')">
                                <a-input-number id="inputNumber" v-model="minuteNum" :min="1" :max="100000"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-button type="primary" @click="doTest">{{i18n('list.test','测试')}}</a-button>
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.result','结果')">
                                {{testValue}}
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import BpmCalCalendarApi from '@/api/bpm/core/bpmCalCalendar'
    import {RxLayout, RxFit, BaseForm, RxDialog, Util} from '@lowcode/jpaas-common-lib';

    export default {
        name: 'bpm-cal-calendar-edit',
        mixins: [BaseForm],
        components: {
            RxFit,
            RxLayout,
            RxDialog,
            Util
        },
        props: {
            minuteNum: 1,
            layerid: String,
            lydata: Object,
            destroy: Function,
            settingId: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                testValue: "",
                endDate: "",
                beginDate: "",
                computeWay: "",
                showTime: false
            }
        },
        created() {
            this.computeWay = "time";
            this.showTime = true;
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "bpmCalSetting", key);
            },
            doTest() {
                var self_ = this;
                var parameter = {
                    settingId: this.settingId,
                    beginDate: this.beginDate
                };
                if (this.computeWay == "time") {
                    parameter.endDate = this.endDate;
                    BpmCalCalendarApi.getMinuteBetweenTimeBlock(parameter).then(res => {
                        self_.testValue = res.data;
                    })
                } else {
                    parameter.minuteNum = this.minuteNum;
                    BpmCalCalendarApi.getEndTimeByCalendar(parameter).then(res => {
                        var date = new Date(res.data);
                        date = self_.getData(date);
                        self_.testValue = date;
                    })
                }
            },
            getData(date) {
                var Y = date.getFullYear() + '-';
                var M = (this.getTenValue(date.getMonth() + 1)) + '-';
                var D = this.getTenValue(date.getDate()) + ' ';
                var h = this.getTenValue(date.getHours()) + ':';
                var m = this.getTenValue(date.getMinutes()) + ':';
                var s = this.getTenValue(date.getSeconds());
                return Y + M + D + h + m + s
            },
            getTenValue(val) {
                return val >= 10 ? val : "0" + val;
            },
            onBeginDataChange(value, dateString) {
                this.beginDate = dateString;
            },
            onBeginDataOk(value) {
                this.beginDate = this.getData(value._d);
            },
            onEndDataChange(value, dateString) {
                this.endDate = dateString;
            },
            onEndDataOk(value) {
                this.endDate = this.getData(value._d);
            },
            onChangeComputeWay(val) {
                if (this.computeWay == "time") {
                    this.showTime = true;
                } else {
                    this.showTime = false;
                }
            },
            okFun() {
                Util.closeWindow(this, "ok");
            },
            cancel() {
                Util.closeWindow(this, "cancel");
            },
        },
    };
</script>
<style scoped>
    .events {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .events .ant-badge-status {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        font-size: 12px;
    }

    .notes-month {
        text-align: center;
        font-size: 28px;
    }

    .notes-month section {
        font-size: 28px;
    }
</style>
